<template>
    <div class="fixed bottom-8 right-4 z-50">
        <!-- 主按钮 -->
        <button @click="toggleMenu"
            class="p-3 w-12 h-12 bg-gray-400 hover:bg-gray-600 text-white rounded-full shadow-lg transition-all duration-300 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition-transform duration-300"
                :class="{ 'rotate-180': isOpen }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    :d="isOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
            </svg>
        </button>

        <!-- 子菜单按钮组 -->
        <transition-group name="menu" tag="div" class="absolute bottom-full right-0 mb-4 flex flex-col gap-3">
            <!-- 回到顶部 -->
            <button v-if="isOpen" @click="scrollToTop" key="to-top"
                class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
                :class="{ 'scale-100': isOpen }">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 10l7-7m0 0l7 7m-7-7v18" />
                </svg>
            </button>

            <!-- 展开目录 -->
            <button v-if="isOpen" key="feedback" @click="catalogStatus.toggleCollapse"
                class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
                :class="{ 'scale-100': isOpen }">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 outline-toggle" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
                </svg>
            </button>


            <!-- 回到顶部 -->
            <button v-if="isOpen" @click="scrollToTop" key="to-top"
                class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-0"
                :class="{ 'scale-100': isOpen }">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
            </button>
        </transition-group>
    </div>
</template>

<script setup>
import { articlesStatus } from '../../ts/pinia'
let catalogStatus = articlesStatus()
import { ref } from 'vue'
const isOpen = ref(false)

const toggleMenu = () => {
    isOpen.value = !isOpen.value
}
const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}

</script>



<style>
/* 优化后的过渡动画 */
.menu-enter-active,
.menu-leave-active {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu-enter-from {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
}

.menu-leave-to {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
}
</style>